<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      /* height: 500px; */
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; 
    }

    .item {
      width: 140px;
      height: 140px;
      /* 方法一：通过手动计算剩余空间，然后计算出给每个元素的margin值
         ，并且最后一个元素不需要margin，同时不要设置justify-content: space-between;  
         缺点是如果父盒子的宽度变了，那就要重新计算margin了 */
      /* margin-right: 20px; */
    }

    .container > i {
        /* 方法二：最简单也是最有效的方法，先根据列数-2，在盒子最后放两个i或者span
           然后设置的width就和item设置的一样，这样就解决了该问题 好处是不需要算，
           只是多几个无用元素，原理是空余的位置被span或i给顶替了，
           因为flex布局下所有元素都不会区分块级元素和行内元素，
           那么我们这里设置了和item同样的宽度，就会直接顶替空缺位置，
           而且这里我们又没设置高度，还没背景色，就自然看不到了，
           而且因为没有高度，所以不会把盒子撑爆，根本不会影响原有布局和盒子
        */
      width: 140px;
      background-color: rgb(13, 158, 76);
    }

    /* .item:nth-child(4n) {
      margin-right: 0;
    } */

    .test{
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 500px;
      height: 300px;
      background-color: aquamarine;
      align-items: center;
    }
    .test1{
      background-color: rosybrown; 
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <!-- 关于最后一行，如果与上一行元素数量对不上的话总是对不齐的问题 -->
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <!-- <div class="item item3">3</div> -->
    <!-- <div class="item item3">3</div> -->
    <!-- 添加span/i的个数是列数减-2 至少设置这么多个，设置无数个也不影响其实 -->
   <i></i>
  </div>

  <div class="test">
    <span class="test1">123</span>
    <span class="test1">123</span>
    <span class="test1">123</span>
    <span class="test1">123</span>
    <span class="test1">123</span>
    <span class="test1">123</span>
    <span class="test1">123</span>

    <div style="background-color: bisque; align-self:stretch" >123</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>
</html>